<template>
  <!-- 后台多语言 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="后台多语言" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box" style="max-height: 700px;overflow: auto;">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='a_base_message_id'" label="" prop="a_base_message_id">
              <el-input-number :min="0" :precision="0" v-model="formParams.a_base_message_id" controls-position="right" clearable placeholder="请输入多语言ID"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='lang'" label="" prop="lang" style="height:auto;padding-bottom:10px">
              <el-select v-model="formParams.lang" placeholder="请选择多语言" multiple clearable filterable style="width: 75%;" @change="chooseLangItem">
                <el-option :label="second.label" :value="second.key" v-for="(second, two) in langDataList" :key="two"></el-option>
              </el-select>
              <el-button size="medium" type="warning" @click="chooseAll" style="margin-left: 15px;">全选</el-button>
              <el-button size="small" type="info" :disabled="chooseLangDataList.length == 0 ? true : false" @click="cancelAll" style="margin-left: 20px;">取消</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-col :span="24" class="grid-cell" v-if="chooseLangDataList.length > 0">
        <p class="box-title">多语言设置:</p>
        <div class="flexWrap">
          <div class="prooItem" v-for="(item, index) in chooseLangDataList" :key="index">
            <p style="margin: 0;font-size: 15px;">{{ item.label }}</p>
            <el-input type="textarea" :rows="2" v-model="item.lang" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </el-col>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addAdminMultilingual,
  editAdminMultilingual
} from '@/api/game'
import {
  LANG_FORM,
  LANG_DATA
} from '@/utils/enum'

import { mapActions } from "vuex";

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      LANG_FORM,
      LANG_DATA,
      isShow: false,
      itemData:[
        { label: '多语言ID', key: 'a_base_message_id' ,pass:true},
        { label: '多语言内容', key: 'lang' },
      ],
      formParams: {
        a_base_message_id:'',
        lang: [],
      },
      ruleForm: {
        a_base_message_id: [{ required: true, trigger: 'blur', message: '请输入多语言ID', }],
      },
      langDataList:LANG_DATA,
      chooseLangDataList: [],
    }
  },
  watch: {
    show: function () {
      let that = this, langKey = [], langVlaue = []
      that.isShow = that.show
      that.chooseLangDataList = []
      if (that.data) {
        that.data.lang = []
        that.formParams = JSON.parse(JSON.stringify(that.data))
        // 多语言回显
        that.formParams.lang=that.langBack(that.data)
        langKey = Object.keys(that.formParams)
        langVlaue = Object.values(that.formParams)
        that.langDataList.map(item => {
          langKey.map((first, index) => {
            if (item.key == first) {
              item.lang = langVlaue[index]
              if (langVlaue[index]) {
                that.chooseLangDataList.push(item)
              }
            }
          })
        })
      } else {
        that.formParams = {
          a_base_message_id:'',
          lang: [],
        }
        that.chooseLangDataList = []
      }
    },
  },
  mounted () { },
  methods: {
    ...mapActions({
      'updateLanguageData': 'commonState/updateLanguageData'
    }),
    // 回显多语言
    langBack(obj){
      let that=this,lang=[];
      for (const key in obj) {
        for (const keys in that.LANG_FORM) {
          if(that.data[key] && keys==key){
            lang.push(key)
          }
        }
      }
      return lang
    },
    // 选择语言
    chooseLangItem (val) {
      let that = this;
      // 新增
      if (!that.formParams.id) {
        that.chooseLangDataList = []
        that.langDataList.map(item => {
          val.map(first => {
            if (item.key == first) {
              that.chooseLangDataList.push(item)
            }
          })
        })
      } else {
        // 修改
        that.chooseLangDataList = []
        that.langDataList.map(item => {
          val.map(first => {
            if (item.key == first) {
              that.chooseLangDataList.push(item)
            }
          })
        })
      }
    },
    // 全选
    chooseAll () {
      let that = this;
      that.formParams.lang = []
      that.chooseLangDataList = []
      that.chooseLangDataList.map(item => {
        that.langDataList.map(first => {
          if (item.key == first.key) {
            first.num = item.num
          }
        })
      })
      that.langDataList.map(item => {
        that.chooseLangDataList.push(item)
        that.formParams.lang.push(item.key)
      })
    },
    // 取消全选
    cancelAll () {
      this.formParams.lang = []
      this.chooseLangDataList = []
    },
    // 确认
    handleConfirm (formvalue) {
      let that = this, langKey = [], langValue = {}, noData = [],
        params = JSON.parse(JSON.stringify(that.formParams));
      langKey = Object.keys(this.LANG_FORM)
      that.chooseLangDataList.map(item => {
        langKey.map(first => {
          if (item.key == first && item.lang) {
            langValue[first] = item.lang
          }
        })
        if (!item.lang) {
          noData.push(item)
        }
      })
      if (noData.length != 0) {
        return that.$message.error('请输入对应语言的内容')
      }
      // 查询是否有英语
      if(!that.englishExist()){
        return that.$message.error('请输入英语对应的语言内容')
      }
      langValue.a_base_message_id=params.a_base_message_id
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addAdminMultilingual(langValue).then(function (res) {
              that.$message.success(res.msg)
              that.updateLanguageData(true)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            langValue.id = params.id
            editAdminMultilingual(langValue).then(function (res) {
              that.$message.success(res.msg)
              that.updateLanguageData(true)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 是否有英语
    englishExist(){
      return (this.chooseLangDataList.find((item) => item.key === 'c_base_en_us')?.lang || '')
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.prooItem {
  width: 30%;
  margin: 10px;
}
</style>
